<!DOCTYPE html>
<html lang="en">
    <head>
        <title>鼠标悬停在图片上显示遮罩效果</title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Original Hover Effects with CSS3" />
        <meta name="keywords" content="css3, transitions, thumbnail, animation, hover, effect, description, caption" />
        <meta name="author" content="Alessio Atzeni for Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/reset.css" /><!--此样式可以删除-->
        <link rel="stylesheet" type="text/css" href="css/style_common.css" />
        <link rel="stylesheet" type="text/css" href="css/style1.css" />
        <link rel="stylesheet" type="text/css" href="css/style2.css" />
        <link rel="stylesheet" type="text/css" href="css/style3.css" />
        <link rel="stylesheet" type="text/css" href="css/style4.css" />
        <link rel="stylesheet" type="text/css" href="css/style5.css" />
        <link rel="stylesheet" type="text/css" href="css/style6.css" />
        <link rel="stylesheet" type="text/css" href="css/style7.css" />
        <link rel="stylesheet" type="text/css" href="css/style8.css" />
        <link rel="stylesheet" type="text/css" href="css/style9.css" />
        <link rel="stylesheet" type="text/css" href="css/style10.css" />
        <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
    </head>
    <body>
        <div class="container">
           
          <div class="main">
            	
                <h1 class="title">鼠标悬停在图片上显示遮罩效果</h1>
                
                <!--S DEMO1 使用style1.css-->
                <div class="view view-first">
                    <img src="images/1.jpg" />
                    <div class="mask">
                        <h2>Hover Style #1</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>  
               <!--E DEMO1-->
               
               <!--S DEMO2 使用style2.css-->
                <div class="view view-second">
                    <img src="images/5.jpg" />
                    <div class="mask"></div>
                    <div class="content">
                        <h2>Hover Style #2</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>
               <!--E DEMO2-->
               
               <!--S DEMO3 使用style3.css-->
                <div class="view view-third">
                    <img src="images/9.jpg" />
                    <div class="mask">
                        <h2>Hover Style #3</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>
               <!--E DEMO3-->
               
               <!--S DEMO4 使用style4.css-->
                <div class="view view-fourth">
                    <img src="images/13.jpg" />
                    <div class="mask">
                        <h2>Hover Style #4</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>
               <!--E DEMO4-->
               
               <!--S DEMO5 使用style5.css-->
                <div class="view view-fifth">
                    <img src="images/1.jpg" />
                    <div class="mask">
                        <h2>Hover Style #5</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>
               <!--E DEMO5-->
               
               <!--S DEMO6 使用style6.css-->
                <div class="view view-sixth">
                    <img src="images/13.jpg" />
                    <div class="mask">
                        <h2>Hover Style #6</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>
               <!--E DEMO6-->
               
               <!--S DEMO7 使用style7.css-->
                <div class="view view-seventh">
                    <img src="images/7.jpg" />
                    <div class="mask">
                        <h2>Hover Style #7</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>
               <!--E DEMO7-->
               
               <!--S DEMO8 使用style8.css-->
                <div class="view view-eighth">
                    <img src="images/16.jpg" />
                    <div class="mask">
                        <h2>Hover Style #8</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>
               <!--E DEMO8-->
               
               <!--S DEMO9 使用style9.css-->
                <div class="view view-ninth">
                    <img src="images/11.jpg" />
                    <div class="mask mask-1"></div>
                    <div class="mask mask-2"></div>
                    <div class="content">
                        <h2>Hover Style #9</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>
               <!--E DEMO9-->
               
               <!--S DEMO10 使用style10.css-->
                <div class="view view-tenth">
                    <img src="images/16.jpg" />
                    <div class="mask">
                        <h2>Hover Style #10</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>
               <!--E DEMO10-->
               
          </div>
        </div>
    </body>
</html>